---
order: 3.2
category: '@threlte/extras'
title: useProgress
sourcePath: 'packages/extras/src/lib/hooks/useProgress.ts'
type: 'hook'
---

Convenience hook that wraps `THREE.DefaultLoadingManager`.

<Example path="extras/use-progress" />

<small>
  Model: Battle Damaged Sci-fi Helmet by [theblueturtle\_](https://sketchfab.com/theblueturtle_)
</small>

### Examples

#### Basic Example

You can use and place this hook anywhere. Typically you would use this hook outside of your `<Canvas>` component to show a loading indicator in your DOM.

```svelte
<script lang="ts">
  // `useProgress` returns readable stores
  const {
    active, // Readable<boolean> – if the DefaultLoadingManager is active
    item, // Readable<string | undefined> – the currently loading item
    loaded, // Readable<number> - amount of items loaded
    total, // Readable<number> - total amount of items to load
    errors, // Readable<string[]> - all error messages
    progress, // Readable<number> - normalized (0-1) loading progress
    finishedOnce // Readable<boolean> – whether a progress of 1 has been achieved ever.
  } = useProgress()
</script>
```
